<template>
     <div class="demo-image__preview">
        <img class="location-card-img" fit="cover" src="@/assets/img/vip/2.jpg" />
     </div>
    <div class="demo-collapse">
        <el-collapse accordion>
            <el-collapse-item name="1">
                <template #title >
                    会员分类<el-icon class="header-icon" >
                        <info-filled />
                    </el-icon>
                </template>
                <div>
                    Consistent with real life: in line with the process and logic of real
                    life, and comply with languages and habits that the users are used to;
                </div>
                <div>
                    Consistent within interface: all elements should be consistent, such
                    as: design style, icons and texts, position of elements, etc.
                </div>
            </el-collapse-item>

            <el-collapse-item name="2">
                <template #title>
                    会员折扣<el-icon class="header-icon">
                        <Watermelon />
                    </el-icon>
                </template>
                <div>
                    Operation feedback: enable the users to clearly perceive their
                    operations by style updates and interactive effects;
                </div>
                <div>
                    Visual feedback: reflect current state by updating or rearranging
                    elements of the page.
                </div>
            </el-collapse-item>

            <el-collapse-item title="会员福利" name="3">
                <div>
                    Simplify the process: keep operating process simple and intuitive;
                </div>
                <div>
                    Definite and clear: enunciate your intentions clearly so that the
                    users can quickly understand and make decisions;
                </div>
                <div>
                    Easy to identify: the interface should be straightforward, which helps
                    the users to identify and frees them from memorizing and recalling.
                </div>
            </el-collapse-item>
            <el-collapse-item title="会员积分与升级" name="4">
                <div>
                    Decision making: giving advices about operations is acceptable, but do
                    not make decisions for the users;
                </div>
                <div>
                    Controlled consequences: users should be granted the freedom to
                    operate, including canceling, aborting or terminating current
                    operation.
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
        <el-button type="warning" size="large" :icon="Star" >成为vip!</el-button>


</template>
<script setup lang="ts">

import { InfoFilled,Star } from '@element-plus/icons-vue'
import { ref } from 'vue'
const url=ref('@/assets/img/vip/1.jpg')
</script>
<style lang="less" scoped>

</style>